<template>
  <div style="padding: 24px 0;">
    <router-link style="margin-left: 24px;" :to="{path:'/leave/leaveApple'}"><a-button>请假申请</a-button></router-link>
    <router-link :to="{path:'/leave/leaveApproval'}"><a-button>请假审批</a-button></router-link>
    <router-link :to="{path:'/leave/leaveSetting'}"><a-button>基础设置</a-button></router-link>
    <div class="attendance-tit">我的申请</div>
    <div class="line"></div>
    <div class="body">
      <div class="search">
        <div class="search-row">
          <div class="search-input">
            <div class="search-tit">审批状态：</div>
            <a-select v-model="queryList.leaveStatus" allowClear placeholder = "请选择" class="search-desc">
              <a-select-option value="0">待审批</a-select-option>
              <a-select-option value="1">已同意</a-select-option>
              <a-select-option value="2">已拒绝</a-select-option>
              <a-select-option value="3">已撤销</a-select-option>
              <a-select-option value="4">已销假</a-select-option>
            </a-select>
          </div>
          <div class="search-input">
            <div class="search-tit">请假类型：</div>
            <a-select v-model="queryList.leaveType" allowClear placeholder = "请选择" class="search-desc">
              <a-select-option
                v-for=" item in leaveList"
                :key="item.id"
                :title="item.leaveName"
                :value="item.id">{{ item.leaveName }}
              </a-select-option>
            </a-select>
          </div>
          <a-button class="day-form-btn" type="primary" @click="getList()">搜索</a-button>
          <a-button class="day-form-btn" @click="reset">重置</a-button>
        </div>
        <a-button>导出数据</a-button>
      </div>

      <a-table :columns="columns" :data-source="list" class="table" :key="Date.now()" ref="table">
        <span slot="leaveMinute" slot-scope="scope, record">{{ record.leaveMinute/60+'分钟'+record.leaveMinute%60+'分钟' }}</span>
        <span slot="startEndTime" slot-scope="scope, record">{{ record.leaveStartDatetime + '-' + record.leaveEndDatetime}}</span>
        <span slot="leaveStatus" slot-scope="scope, record">
          <div v-if="record.leaveStatus == 0">待审批</div>
          <div v-if="record.leaveStatus == 1">已同意</div>
          <div v-if="record.leaveStatus == 2">已拒绝</div>
          <div v-if="record.leaveStatus == 3">已撤销</div>
          <div v-if="record.leaveStatus == 4">已销假</div>
        </span>
        <span slot="courseStatus" slot-scope="scope, record">
          <div v-if="record.courseStatus == 0">无课程</div>
          <div v-if="record.courseStatus == 1">已代课</div>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="detailChange(record.id)">详情</a>
        </span>
      </a-table>
      <a-modal v-model="detailsDialog" title="调代课详情" :footer="null" width="1000px">
        <div class="details-row">
          <div class="details-blue"></div>
          <div class="details-tit">申请信息</div>
        </div>
        <div class="details-row details-vice-row">
          <div class="details-vice-tit">请假类型：</div>
          <div class="details-vice-desc">{{ leaveApplyDetailData.leaveTypeName }}</div>
        </div>
        <div class="details-row details-vice-row">
          <div class="details-vice-tit">请假时间：</div>
          <div class="details-vice-desc">{{ leaveApplyDetailData.leaveStartDatetime + '-' + leaveApplyDetailData.leaveEndDatetime }}</div>
        </div>
        <div class="details-row details-vice-row">
          <div class="details-vice-tit">请假时长：</div>
          <div class="details-vice-desc">{{ leaveApplyDetailData.leaveMinute/60+'分钟'+leaveApplyDetailData.leaveMinute%60+'分钟' }}</div>
        </div>
        <div class="details-row details-vice-row">
          <div class="details-vice-tit">请假原因：</div>
          <div class="details-vice-desc">{{ leaveApplyDetailData.leaveReason }}</div>
        </div>

        <div v-if="leaveApplyDetailData.substituteMyApplyDetailDTO && leaveApplyDetailData.substituteMyApplyDetailDTO.substituteCourseList" class="details-row details-row-margin">
          <div class="details-blue"></div>
          <div class="details-tit">调代课信息</div>
        </div>
        <template v-if="leaveApplyDetailData.substituteMyApplyDetailDTO && leaveApplyDetailData.substituteMyApplyDetailDTO.substituteCourseList">
          <div v-for="(item,index) in leaveApplyDetailData.substituteMyApplyDetailDTO.substituteCourseList" :key="index" class="details-card">
            <div class="details-vice-card">
              <div class="details-vice-card-row">
                <div class="details-vice-card-time">{{ item.courseDate }}</div>
                <div class="details-vice-card-time">{{ item.substituteCourseDate }}</div>
              </div>
              <div class="details-vice-card-row details-vice-card-row-margin">
                <div class="details-vice-card-desc">{{ item.courseName }}</div>
                <div class="details-vice-card-btn">
                  <a-icon type="interaction" class="details-vice-card-icon" />
                  <div v-if="item.substituteType == 0" class="details-vice-card-icon-desc">代课</div>
                  <div v-if="item.substituteType == 1" class="details-vice-card-icon-desc">调课</div>
                  <div v-if="item.substituteType == 2" class="details-vice-card-icon-desc">调课（自修）</div>
                </div>
                <div class="details-vice-card-desc">{{ item.substituteCourseName }}</div>
              </div>
              <div class="details-vice-card-row details-vice-card-row-margin">
                <div class="details-vice-card-name">
                  <div class="details-vice-card-name-tit">{{ item.courseTeacherName }}</div>
                  <div class="details-vice-card-name-line"></div>
                  <div class="details-vice-card-name-tit">{{ item.courseClassName }}</div>
                </div>
                <div class="details-vice-card-name">
                  <div class="details-vice-card-name-tit">{{ item.substituteTeacherName }}</div>
                  <div class="details-vice-card-name-line"></div>
                  <div class="details-vice-card-name-tit">{{ item.substituteTeacherDeptName }}</div>
                </div>
              </div>
            </div>
            <div v-if="item.approveStatus == 0" class="details-card-result">
              <a-icon class="details-card-result-icon-one" type="history" />
              <div class="details-card-result-tit">待审批</div>
            </div>
            <div v-if="item.approveStatus == 1" class="details-card-result">
              <a-icon class="details-card-result-icon-two" type="check-circle" />
              <div class="details-card-result-tit">已同意</div>
            </div>
            <div v-if="item.approveStatus == 2" class="details-card-result">
              <a-icon class="details-card-result-icon-three" type="close-circle" />
              <div class="details-card-result-tit">已拒绝</div>
            </div>
            <div class="details-card-result-time">{{ item.approveTime }}</div>
            <div class="details-card-result-desc">审批人意见：{{ item.approveRemark }}</div>
          </div>
        </template>
        <template v-if="leaveApplyDetailData.approvalFinal == 1">
          <div class="details-row details-row-margin">
            <div class="details-blue"></div>
            <div class="details-tit">审批信息</div>
          </div>
          <div v-for="(item,index) in leaveApplyDetailData.applyApprovalList" :key="index" >
            <div class="details-row details-vice-row">
              <div class="details-vice-tit">审批人：</div>
              <div class="details-vice-desc">{{ item.userName }}</div>
            </div>
            <div class="details-row details-vice-row">
              <div class="details-vice-tit">同意理由：</div>
              <div class="details-vice-desc">{{ item.approveRemark }}</div>
            </div>
          </div>
        </template>
        <template v-if="leaveApplyDetailData.leaveCancel == 1">
          <div class="details-row details-row-margin">
            <div class="details-blue"></div>
            <div class="details-tit">销假信息</div>
          </div>
          <div class="details-row details-vice-row">
            <div class="details-vice-tit">销假时间：</div>
            <div class="details-vice-desc">{{ leaveApplyDetailData.leaveCancelStartTime + '-' + leaveApplyDetailData.leaveCancelEndTime }}</div>
          </div>
        </template>
      </a-modal>
    </div>
  </div>
</template>
<style scoped="scoped" lang="scss">
  .attendance-tit {
    font-size: 16px;
    color: #333333;
    margin: 24px 0 24px 24px;
  }
  .line {
    height: 1px;
    background: #E5E5E5;
  }
  .body {
    padding: 24px;
    .search {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .search-row {
        display: flex;
        align-items: center;
        .search-input {
          display: flex;
          align-items: center;
          .search-tit {
            font-size: 14px;
            color: #333333;
          }
          .search-desc {
            width: 200px;
            margin-right: 40px;
          }
        }
        .day-form-btn {
          margin-right: 10px;
        }
      }
    }
    .table {
      margin-top: 24px;
    }
  }
  .details-row {
    display: flex;
    align-items: center;
    .details-blue {
      width: 4px;
      height: 14px;
      background: #4174FD;
      border-radius: 2px;
    }
    .details-tit {
      margin-left: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #333333;
    }
    .details-vice-tit {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }
    .details-vice-desc {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
    }
  }
  .details-vice-row {
    margin: 16px 0 0 10px;
  }
  .details-row-margin {
    margin-top: 32px;
  }
  .details-card {
    width: 592px;
    background: #F2F4FA;
    border-radius: 8px;
    margin-top: 16px;
    padding: 16px;
    .details-vice-card {
      height: 110px;
      background: #FFFFFF;
      border-radius: 8px;
      padding: 16px;
      .details-vice-card-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .details-vice-card-time {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
        }
        .details-vice-card-desc {
          font-size: 16px;
          font-weight: 600;
          color: #5B739B;
        }
        .details-vice-card-btn {
          width: 80px;
          height: 32px;
          background: rgba(65,116,253,0.2400);
          border-radius: 22px;
          padding: 6px 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .details-vice-card-icon {
            font-size: 20px;
            color: #FFFFFF;
            background-color: #4174FD;
          }
          .details-vice-card-icon-desc {
            font-size: 14px;
            font-weight: 400;
            color: #4174FD;
          }
        }

        .details-vice-card-name {
          display: flex;
          align-items: center;
        }
        .details-vice-card-name-tit {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
        .details-vice-card-name-line {
          width: 1px;
          height: 14px;
          background: #E5E5E5;
          margin: 0 12px;
        }
      }
      .details-vice-card-row-margin {
        margin-top: 3px;
      }
    }
    .details-card-result {
      display: flex;
      align-items: center;
      margin-top: 16px;
      .details-card-result-icon-one {
        font-size: 14px;
        color: #FFFFFF;
        background-color: #FF8948;
        border-radius: 50%;
      }
      .details-card-result-icon-two {
        font-size: 14px;
        color: #FFFFFF;
        background-color: #4174FD;
        border-radius: 50%;
      }
      .details-card-result-icon-three {
        font-size: 14px;
        color: #FFFFFF;
        background-color: #FF394C;
        border-radius: 50%;
      }
      .details-card-result-tit {
        font-size: 14px;
        font-weight: 400;
        color: #FF8948;
        margin-left: 3px;
      }
    }
    .details-card-result-time {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      margin: 4px 0 0 17px;
    }
    .details-card-result-desc {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin: 12px 0 0 17px;
    }
  }
</style>
<script>
  const columns = [
    {
      title: '序号',
      customRender: (text,record,index) => `${index+1}`,
    },
    {
      title: '请假类型',
      dataIndex: 'leaveTypeName',
    },
    {
      title: '请假时长',
      dataIndex: 'leaveMinute',
      scopedSlots: { customRender: 'leaveMinute' },
    },
    {
      title: '启始时间',
      dataIndex: 'startEndTime',
      scopedSlots: { customRender: 'startEndTime' },
    },
    {
      title: '审批状态',
      dataIndex: 'leaveStatus',
      scopedSlots: { customRender: 'leaveStatus' },
    },
    {
      title: '处理时间',
      scopedSlots: { customRender: 'tdkly' },
    },
    {
      title: '课程情况',
      dataIndex: 'courseStatus',
      scopedSlots: { customRender: 'courseStatus' },
    },
    {
      title: '操作',
      scopedSlots: { customRender: 'action' },
    }
  ];
  import moment from 'moment';
  import { leaveApplyPage,leaveApplyDetail,getLeaveList } from '@/api/apply'
  export default {
    data() {
      return {
        columns,
        visible:false,
        list: [],
        groupStatus: null,
        sfsxTitle: '1.调代课来源为教师请假：请假最终被审批通过后，调代课才生效；2.调代课来源为新增调代课：如果审批人只有被调代课老师，也只有所有老师都同意之后才能生效；如果除被调代课老师外，还需要其他人员审批，则待最终审批人审批通过后生效。',
        detailsDialog: false,
        leaveApplyDetailData: {},
        queryList: {
          leaveStatus: undefined
        },
        leaveList: [],
      }
    },
    created() {
      this.getList()
      this.getLeaveList()
    },
    methods: {
      moment,
      getList() {
        leaveApplyPage(this.queryList).then(response => {
          this.list = response.data.records
        })
        .catch(() => {

        })
      },
      getLeaveList() {
        getLeaveList().then(response => {
          this.leaveList = response.data
        })
        .catch(() => {

        })
      },
      reset() {
        this.queryList = {
          leaveStatus: undefined
        }
      },
      detailChange(id) {
        this.detailsDialog = true
        leaveApplyDetail(id).then(response => {
          this.leaveApplyDetailData = response.data
        })
        .catch(() => {
        })
      }
    },
  }
</script>
